<!-- 角色管理 -->
<template>
  <a-layout-content style="margin: 0 16px">
    <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
      <a-table :columns="columns" :data-source="data">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-tag color="#2db7f5" class="tag" @click="edit(record)">编辑</a-tag>
          </template>
          <template v-else-if="column.key === 'state'">
            <a-switch v-model:checked="checked">
              <template #checkedChildren><check-outlined /></template>
              <template #unCheckedChildren><close-outlined /></template>
            </a-switch>
          </template>
        </template>
      </a-table>
      <a-modal 
        v-model:open="open"
        :title="'编辑'"
        :ok-button-props="{ disabled: false }"
        :cancel-button-props="{ disabled: false }"
        @ok="handleOk">
        <a-form :model="editForm">
          <a-form-item label="用户：">
            <a-input readOnly :disabled='true' v-model:value="editForm.name" style="width:90%; margin-bottom:10px;"/>
          </a-form-item>
          <a-form-item label="角色：">
            <a-select 
              v-model:value="editForm.optionValue"
              :options="options"
              style="width: 90%; margin-bottom:10px;"
              >
              <!-- @change="handleChange" -->
          </a-select>
          </a-form-item>
          <a-form-item label="描述：">
            <a-textarea v-model:value="editForm.textValue" :maxlength="50" style="width: 90%;"/>
          </a-form-item>
        
        </a-form>
      </a-modal>
    </div>
  </a-layout-content>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import { message } from 'ant-design-vue';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons-vue';

const columns = [
  { title: '用户名', width: 80, dataIndex: 'name', key: 'name', fixed: 'left' },
  { title: '角色', width: 100, dataIndex: 'role', key: 'role', fixed: 'left' },
  { title: '角色描述', dataIndex: 'describe', key: 'describe', width: 150 },
  { title: '状态', dataIndex: 'state', key: 'state', width: 150 },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 60,
  },
];
const data = reactive([
  {
    key: 1,
    name: `China baby`,
    role: "管理员",
    describe: `China is no.1`,
  }
]);
const editForm = reactive({
  key: null,
  name: '',
  optionValue: '',
  textValue: ''
})
const checked = ref(false)
// const handleChange = (value) => {
//   console.log(`selected ${value}`)
// }
const options = [
  {
    value: '管理员',
    label: '管理员',
  },
  {
    value: '普通用户',
    label: '普通用户',
  },
]

const open = ref(false)

watch(checked, (newValue) => {
  if(newValue){
    message.success('该用户已启用');
  } else{
    message.error('已停用该用户');
  }
})

const edit = (record) => {
  open.value = true
  editForm.key = record.key
  editForm.name = record.name
  editForm.textValue = record.describe
  editForm.optionValue = record.role
}

const handleOk = () => {
  const users = data.find(item => item.key === editForm.key)
  Object.assign(users, editForm)
  message.success('修改成功');
  console.log(users, editForm);
  open.value = false;
}

</script>

<style scoped lang="less">

</style>
